<template>
    <div class="login-box">
        <!-- 登录页面 -->
        <div class="login">
            <i class="brand">WANGWANG.cn</i>
            <div class="ipt-box">
                <input v-model="loginObj.phone" type="text" placeholder="手机号">
            </div>
            <div class="ipt-box">
                <input v-model="loginObj.code" type="text" placeholder="验证码">
                <span class="btn" @click="getVdtCode">{{vdtText}}</span>
            </div>
            <van-checkbox class="size-color" v-model="remember" checked-color="#C1AB96">记住手机号？</van-checkbox>
            <van-checkbox class="size-color" v-model="auto" checked-color="#C1AB96">7天免登录？</van-checkbox>

            <van-button 
                v-on:click.native="loginEvt" 
                class="loginbtn"
                color="linear-gradient(to right, #F0D5B8, #C1AB96)" 
                :loading="loading"
                :disabled="!/^1[3-9]{1}[0-9]{9}$/.test(loginObj.phone) || loginObj.code.length !== 4"
                block>注册
            </van-button>
            <div class="onlogin">
                <div>
                    <van-divider solid :style="{ color: '#C1AB96', borderColor: '#F2F2F2', padding: '0 40px' }">社交账号登录</van-divider>
                </div>
                <div class="logins">
                    <img src="../../images/login/qq.png" alt="">
                    <img src="../../images/login/wechat.png" alt="">
                    <img src="../../images/login/weibo.png" alt="">
                </div>
            </div>
        </div>
        

        <div class="right">wangwang.cn &copy; 2022-</div>
        </div>
</template> 

<script>

    // 单个接口引入

    export default {
        data(){
            return{
                TimeData:{
                    days:5
                },
                loginObj: {
                    phone: '',
                    code: ''
                },
                // 是否记住手机号
                remember: false,
                // 是否免登录
                auto: false,
                // 是否关闭广告
                welcome:true,
                // 倒计时秒数
                time: 5,
                currentTime: 100,
                // 欢迎页面定时器
                timer: null,
                // 免登录标识
                // 登录进行中 login、登陆成功 successs、登陆失败 error
                autoFlag: 'success',
                // 节流标识
                vdtText:'获取验证码',
                // 登录的节流标识
                loading:false,
                // 列表数据
                list:[]
            }
        },
        
        async created(){

        },
        methods: {

            loginEvt(){
                this.$router.push('/login')
            },
        }
    }
</script>

<style lang="less" scoped>
    @import "../../style/common.less";
    .login-box {
        display: block;
        position: relative;
        height: 100%;
        width: 100%;
        .welcome {
            height: 100%;
            width: 100%;
            .icon {
                display: block;
                // position: relative;
                width: 100%;
                height: 100%;
                background: url(../../images/login/background.png) center center / 100% 100% no-repeat;
                font-size: .8rem;
                text-align: center;
                color:#F8E6D3;
                line-height: 900px;
                > img{
                    background: #F8E6D3;
                    border-radius: 18px;
                    color: #C1AB96;
                }
                > span{
                    display: block;
                    position: absolute;
                    top: 62px;
                    left: 50%;
                }
            }
        }
        .login{
            display: block;
            background: url(../../images/login/background.png) center center / 100% 100% no-repeat;
            width: 100%;
            height: 100%;
            padding: 0 25px;
            > .brand {
                line-height: 180px;
                display: block;
                margin: auto;
                margin-left: 0;
                width: 300px;
                height: 180px;
                color: #C1AB96;
                font-size: 30px;
                font-weight: 600;
                // background: url(../../images/logo-icon.png) center center / 300px 180px no-repeat;
            }
            > .ipt-box {
                display: flex;
                padding: 10px 0;
                margin-bottom: 16px;
                border-bottom: solid 1px @cdd;
                input {
                    flex: 1;
                    height: 32px;
                    background: transparent;
                    border: none;
                    outline: none;
                    text-indent: 12px;
                    font-size: .9rem;
                    color: #C1AB96;
                    // & 与input是同级样式
                    &::-webkit-input-placeholder {
                        font-size: .75rem;
                        color: @cdd;
                    }
                }
                .size-color{
                    color: #C1AB96;
                    font-size: .75rem;
                }
                .btn {
                    flex: 0 0 126px;
                    // flex设置以后，width是不生效的
                    // width: 150px;
                    border-left: solid 1px @cdd;
                    font-size: .7rem;
                    color: #C1AB96;
                    line-height: 32px;
                    text-align: center;
                }
            }

            .van-checkbox {
                color:#C1AB96;
                margin-bottom: 20px;
                font-size: .75rem;
            }
            .loginbtn{
                width: 100%;
                border-radius: 18px;
            }

            .link {
                display: block;
                margin: 16px 0;
                line-height: 32px;
                font-size: .75rem;
                color: #C1AB96;
                margin-bottom: 120px;
            }
        }
        .onlogin{
            width: 100%;
            // background-color: #F8E6D3;
        }
        .logins{
            display: flex;
            justify-content: space-between;
            width: 300px;
            height: 50px;
            margin: 0 auto;
            margin-bottom: 20px;
            > img{
                background-color: #F8E6D3;
                border-radius: 50%;
                color: #F8E6D3;
                width: 50px;
                height: 50px;
            }
        }

        .right {
            position: absolute;
            left: 0;
            bottom: 16px;
            width: 100%;
            font-size: .65rem;
            color: @cdd;
            text-align: center;
        }
        }
</style>
